<template>

    <el-container>
      <el-header>

        <el-menu
          class="el-menu-demo"
          mode="horizontal"

          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-sub-menu index="2">
            <template #title>文章</template>
            <el-menu-item index="2-1" v-if="role===1">新建文章</el-menu-item>
            <el-menu-item index="2-2" v-if="role===1">回收站</el-menu-item>

          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>用户</template>
            <el-menu-item index="3-1" v-if="role!==1">登录</el-menu-item>
            <el-menu-item index="3-2" v-if="role===1">退出</el-menu-item>


          </el-sub-menu>
        </el-menu>

        </el-header>
      <el-container>

        <el-container>
          <el-main ><router-view/></el-main>
          <el-footer><h1>版权所有，仿冒不究</h1></el-footer>
        </el-container>
        <el-aside width="200px" right="0px"></el-aside>
      </el-container>
    </el-container>

</template>

<script>
import {ArrowDown} from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components:[ArrowDown],
  data(){
    return {

    }
  },
  methods:{
    handleSelect(a){
      let that=this
      console.log(a)
      if (a==='1'){
        this.$router.push('/')
      }
      if (a==='3-1'){
        this.$router.push('/login')
      }
      if (a==='3-2'){
        this.$store.dispatch('logout',that.$store.state).then(()=>{


          that.$router.push("/")


        })
      }
      if (a==='2-1'){
        that.$router.push("/article/create")
      }
      if (a==='2-2'){
        alert("回收站")
      }

    }
  },
  computed:{
    role(){
      return this.$store.state.id
    }
  }

}
</script>
<style>
.el-container{
  min-height: 100vh
}
</style>
